<template>
  <div class="container">

    <!-- -----------------------------------------------------------------过滤器一栏---------------------------------- -->
    <div class="filter-container">
      <el-select
        v-model="filterTool.name"
        :placeholder="table.name"
        clearable
        style="width: 120px"
        class="filter-item"
      >
        <el-option
          v-for="item in importanceOptions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-input v-model="filter.name" style="width: 250px" placeholder="请输入需要查询的班级"></el-input>
      <el-button
        type="primary"
        icon="Search"
        class="filter-item"
      >
        {{ table.search}}
      </el-button>
    </div>


    <!-- -----------------------------------------------------------------班级管理表格栏---------------------------------- -->
    <div class="table-container">
      <el-table
        :data="classgradesData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          :label="table.number"
          type="index"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          :label="table.headPortrait"
          prop="headPortrait"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.name"
          prop="name"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.stuNumber"
          prop="stuNumber"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.teaNumber"
          prop="teaNumber"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.actions"
          align="center"
          min-width="100px"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="seek(scope.row.classgradeId, scope.row.name)"
            >
              {{ table.seek}}
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="out(scope.row)"
            >
              {{ table.out }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>     
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
// import axios from '@/utils/axios'
// import { ElMessage } from 'element-plus'
export default {
  name: 'Good',
  setup() {
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10 // 分页大小
    })
    const dataMap = reactive({
        filterTool: {
            name: "",
            page: 1,
            limit: 10
        },
        table: {
            number: "序号",
            headPortrait: "头像",
            name: "名称",
            stuNumber: "学生数",
            teaNumber: "教师数",
            actions: "操作",
            search: "搜索",
            seek: "查看信息",
            batchImport: "批量导入学生或老师",
            out: "退出班级",
            addStudent: "添加学生",
            addTeacher: "添加教师"
        },
        classgradesData: [],
        filter: {
          name: ""
        },
        classDetailedData: {
          headPortrait: "枫月",
          name: "丰原万里",
          stuNumber: "50",
          teaNumber: "3",
          submitTime: "2022/7/26/15：35",
          correctTime: "2022/7/27/16：10",
        },
        edit() {
          
        }
    })
    onMounted(() => {              
    })
    
    return {
      ...toRefs(state),
      ...toRefs(dataMap)
    }
  },
  data() {

  },
  methods: {
    // 获取班级基本信息
    getClassgradeBasicInfo() {
      var _this = this
      this.$axios
        .get('/teacher/classgrade/basicinfo')
        .then( response => {
            let stateCode = response.headers["state"]
            if(stateCode=="200"){
                this.classgradesData = response.data
            }
            else if(stateCode==null){
                this.$message.success("请求数据异常！")
            }
            else{
                this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
            }

        })
        .catch(function (error){
            let stateCode = error.response.headers["state"]                            
            if(stateCode!=""){
                _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
            }
            else{
                _this.$message.error("后端异常")
            }
        })
        .then(function (){
            console.log("测试成功")
        }) 
    },
    // 查看具体的班级信息
    seek(index, name) {
      this.$router.push({
        path: '/student/cgdetailedinfo',
        name: 'StudentCgDetailedInfo',
        query: {
          classgradeId: index,
          classgradeName: name
        }
      })
    },
    // 退出班级
    out(classgrade){
      let formData = new FormData();
      formData.append('classId',classgrade.classgradeId);
      this.$axios
        .post('/teacher/class/out',formData)
        .then(()=> {
            this.$message.success("退出班级成功！！")
            location.reload()
        })
        .catch(function (error){
            console.log(error)
        })
        .then(function (){
            console.log("测试成功")
        }) 
    },
    batchImportConfirm() {
      let formData = new FormData();
      formData.append('classgradeId',this.batchImportData.classgradeId);
      formData.append('multipartFile',this.batchImportData.stuFile);
      console.log("*****************************")
      console.log(this.batchImportData.classgradeId)
      console.log(this.batchImportData.stuFile)
      console.log(formData)
      console.log("*****************************")
      this.$axios
        .post('/teacher/student/import',formData)
        .then(response=> {
            console.log("*****************************")
            console.log(response)
            console.log("*****************************")
            this.$message.success("导入成功！！")
                        
        })
        .catch(function (error){
            console.log(error)
        })
        .then(function (){
            console.log("测试成功")
        }) 
      
    },
    // 当文件列表发生改变时，获取文件内容
    onChange(file,files) {
        this.batchImportData.stuFile = files[0].raw
    },

  },
  mounted() {
    this.getClassgradeBasicInfo()
  }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 5%;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
  }
  
  .filter-item {
    display: inline-block;
  }

  .table-container {
    height: 95%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
</style>